<template>
  <el-dialog title="监控点" :visible.sync="dialogVisible" width="80%" :close-on-click-modal="false" :before-close="closeTwo">
    <div class="bigBox">
      <div class="videoInDiv">
        <div v-if="url == ''" class="no-video">请配置视频流地址</div>
        <videoRtsp v-if="url" :id="new Date().getTime().toString()" :url="url" width="100%" style="margin-left: 20px" />
      </div>

      <ul class="videoBottomDiv">
        <li class="ulLi">
          <span class="label">区域名称：</span>
          <span class="value">{{ areaName }}</span>
        </li>
        <li class="ulLi">
          <span class="label">监控点：</span>
          <span class="value">{{ name }}</span>
        </li>
      </ul>
    </div>
  </el-dialog>
</template>

<script>
import dialogEditMixin from '@/mixins/dialogEdit'
import videoRtsp from '@/components/VideoRtsp'
export default {
  components: {
    videoRtsp
  },
  mixins: [dialogEditMixin],
  data() {
    return {
      url: '',
      name: '',
      areaName: '',
      apiKey: {
        search: '/Video/',
        add: '/Video',
        put: '/Video/'
      }
    }
  },
  watch: {
    searchValue: function (newValue, oldValue) {
      if (!newValue.name) {
        return
      }
      this.url = newValue.urlServer ? newValue.urlServer : newValue.subUrlServer ? newValue.subUrlServer : ''
      // this.url = newValue.url
      this.name = newValue.name
      this.areaName = newValue.area.name
    }
  },
  methods: {
    resetFormData() {
      this.formData = {
        url: ''
      }
    },
    closeTwo() {
      this.url = ''
      this.dialogVisible = false
    }
  }
}
</script>

<style lang="scss" scoped>
  .no-video {
    text-align: center;
    font-size: 22px;
    margin-top: 50px;
    color: rgb(211, 111, 111);
  }
  ul,
  li {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .bigBox {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    .videoInDiv {
      padding-right: 40px;
      min-height: 400px;
    }
    .videoBottomDiv {
      width: 100%;
      height: 76px;
      background-color: #fff;
      .ulLi {
        width: 100%;
        padding: 10px 20px;
        box-sizing: border-box;
        .label {
          color: #333;
        }
        .value {
          color: #666;
          font-weight: 700;
        }
      }
    }
  }
</style>
